<script >
import Login from "@/components/register&login/login.vue";
import axios from "axios";

export default {
  components: {Login},
  data(){
    return{
      formMsg:{
        name:"小智",
        number:"123456",
        email:"111@11",
        phone:"13764652121",
        password:"77777777"
      }
    }

  },
  async created() {
    try {
      axios({
        method:"get",
        url:"http://localhost:5000//admin/getSetting",
        params:{
          admin_id:"27"
        }

      }).then((res)=>{
        this.formMsg.name=res.data.data.name
        this.formMsg.number=res.data.data.number
        this.formMsg.email=res.data.data.email
      })
    } catch (error) {
      console.error(error);
    }
  },
  methods:{
    jumpBook(){
      this.$router.push('/admin/book')
    },
    jumpUser(){
      this.$router.push('/admin/user')
    },
    jumpAnnouncement(){
      this.$router.push('/admin/announcement')
    },
    jumpChart(){
      this.$router.push('/admin/chart')
    },
    jumpEdit(){
      this.$router.push('/admin/edit')
    },
    jumpChat(){
      this.$router.push('/admin/chat')
    },
    onSubmit(){
      axios({
        method:"get",
        url:"http://localhost:5000//admin/edit",
        params:{
          admin_id:"27",
          name:this.formMsg.name,
          number:this.formMsg.number,
          phone:this.formMsg.phone,
          password:this.formMsg.password,
          email:this.formMsg.email,
        }

      }).then((res)=>{
        if(res.data.data==="管理员信息更新成功"){
          this.$message({
            type: 'success',
            message: '操作成功!'
          })
        }
      })
    },


  }
}
</script>

<template>
  <div >
    <ul>
      <li>
        <img src="../../assets/img/common/logo.png" alt = "logo" class = "logo">
      </li>
      <li class="other">
        <a @click = jumpBook>图书管理</a>
      </li>
      <li  class="other">
        <a @click="jumpUser">用户管理</a>
      </li>
      <li  class="other">
        <a @click=jumpAnnouncement>公告管理</a>
      </li>
      <li class="other">
        <a @click = jumpChart>数据报表</a>
      </li>
      <li class="current" >
        <a @click = jumpEdit>个人中心</a>
      </li >
      <li class="other2" v-on:click="jumpChat">
        <img src="../../assets/img/common/msg.jpg" alt="msg" class="logo">
      </li>
    </ul>
    <img src="../../assets/img/admin/edit.png" alt="个人设置" class="top-img">
    <div class="information">
      <p class="title">个人信息</p>
      <img src="../../assets/img/common/touxiang.png" alt="头像" class="head">
      <div class="line">
        <label for="name" >管理员:</label>
        <input id="name" v-model="formMsg.name">
      </div>
      <div class="line">
        <label for="number" >学工号:</label>
        <input id="number" v-model="formMsg.number">
      </div>
      <div class="line">
      <label for="email" >邮箱:</label>
      <input id="email" v-model="formMsg.email">
      </div>
      <div class="line">
        <label for="email" >电话:</label>
        <input id="email" v-model="formMsg.phone">
      </div>
      <div class="line">
        <label for="email" >密码:</label>
        <input id="email" v-model="formMsg.password">
      </div>
      <input type="button" value="提交修改" class="change" @click="onSubmit()">
  </div>
</div>
</template>

<style scoped>
ul{
  display: flex;
  background-color: rgb(168,189,203);
  margin: 0;
}
li{
  display: inline-block;
  height: 80%;
  width: 12%;
  padding: 1% 0;
  margin: auto ;
  text-align: center;
}
li.current{
  border-bottom: 5px solid white;
}
li.other:hover{
  cursor: pointer;
  border-bottom: 5px solid white;
}
li.other2:hover{
  cursor: pointer;
  border-bottom: 5px solid rgb(168,189,203);;
}
li>a{
  display: block;
  text-decoration: none;
  font-size: 25px;
  letter-spacing: 5px;
  color: rgba(255, 255, 255, 1);
  font-family: "Arial Black",fantasy;
  margin: 0;
}
.logo{
  vertical-align: middle;
}
.information{
  width: 30vw;
  height: 75vh;
  border-radius: 25px;
  border: 2px solid black;
  margin: 0 auto 0 auto;
  background-color: rgb(239,239,239);
}
.title{
  background-color: pink;
  margin: 0;
  border-radius: 24px 24px 0 0;
  font-size: 200%;
  font-weight: bolder;
  text-align: center;
  padding: 20px;
}
.head{
  display: block;
  margin: 3% auto 1.5% auto;
  border-radius: 120px;
  width: 120px;
  height: 120px;
}
label{
  display: block;
  width: 100px;
  font-size: 120%;
}
.change{
  display: block;
  margin: 30px auto;
  width: 120px;
  height: 40px;
  background-color: rgb(143,175,185);
  border-radius: 25px;
  font-size: 90%;
}
.change:hover{
  cursor: pointer;
}
.top-img{
  width: 76vw;
  height: 11vh;
  margin-left: 12%;
}
div.line{
  width: 440px;
  padding: 10px 0 10px 50px;
  display: flex;
}
div>input{
  //float: right;
  border: none;
  border-radius: 15px;
  font-size: 120%;
  width: 250px;
}
</style>